<template>
  <!-- 
    这里的template标签其实就是组件的template选项
    为了方便将 template选项拿到了外面，有代码提示和高亮了
  -->
  <h1>haha</h1>
  <p>count: {{ count }}</p>
  <button @click="fn">count++</button>

  <hr />

  <!-- 在脚手架里面，现在可以使用组件的原名，和单标签 -->
  <Child />
  <Child2 />
</template>

<script>
// 模块(组件)的引入
// @符在脚手架里面，表示src目录(绝对路径)
import Child from "@/components/Child.vue";
import Child2 from "@/components/Child2.vue";

// const App = {
//   data() {},
// };
// export default App;

export default {
  data() {
    return {
      count: 10,
    };
  },
  methods: {
    fn() {
      this.count++;
    },
  },
  components: {
    Child,
    Child2,
  },
};
</script>

<style scoped>
/* 
  虽然每个组件都有自己的style标签，但是这里的css是整个项目共享的
  style标签加上scoped属性以后，那么这个style标签里面的样式，就只能给自己组件用
*/
</style>
